import React, { useEffect, useState } from 'react'
import { getList, getXz, getSs } from '../../../axios/use'
import { Space, Table, Modal, Checkbox, Form, Input, Button, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import Sear from '../../../constont/Sear';
const Index = () => {
    const [list, setList] = useState([])
    const getlist = async () => {
        const res = await getList()
        setList(res.rows)
    }
    useEffect(() => {
        getlist()
    }, [])
    const columns = [
        {
            title: '消息id',
            dataIndex: 'id',
            key: 'id',
            render: text => <a>{text}</a>,
        },
        {
            title: '消息名称',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '消息描述词',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
        },
        {
            title: '创建结束时间',
            dataIndex: 'updatedAt',
            key: 'updatedAt',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">

                </Space>
            ),
        },
    ];
    //新增
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [xzform] = Form.useForm()
    const [title, setTitle] = useState('')
    const showModal = () => {
        setIsModalOpen(true);
        setTitle('添加一条记录')
        xzform.resetFields()
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const onFinish = async (values) => {
        console.log('Success:', values);
        const data = {
            "title": values.title,//文章标题
            "content": values.content,//文章内容
            "tagList": ["HTTP"],//标签  array[string]
            "categoryList": ["HTTP"],//分类  array[string]
            "authorId": 47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息
        }
        const res = await getXz(data)
        getlist()
        setIsModalOpen(false);
        message.success('新增数据成功');
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    //搜索
    const onFinishs = async (values) => {
        console.log('Success:', values);
        const res = await getSs(values.title)
        setList(res.rows)
    };
    const onFinishFaileds = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    //重置
    const [czform] = Form.useForm()
    const cz = () => {
        czform.resetFields()
    }
    return (
        <div>
            <Button style={{ float: 'right' }} type="primary" onClick={showModal}>
                添加消息
            </Button>
            <Modal
                title={title}
                closable={{ 'aria-label': 'Custom Close Button' }}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    form={xzform}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="消息名称"
                        name="title"
                        rules={[{ required: true, message: '请输入名称!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="消息描述"
                        name="content"
                        rules={[{ required: true, message: '请输入描述!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            <Sear cz={cz} onFinishs={onFinishs} onFinishFaileds={onFinishFaileds} czform={czform}></Sear>
            <Table rowKey='id' columns={columns} dataSource={list}
                pagination={{
                    total: list.length,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    defaultCurrent:1,
                    showTotal: total => `Total ${total} items`
                }}
            />
        </div>
    )
}

export default Index
